<template>
  <div class="container">
    <div class="app-container">
      <el-card :body-style="{ padding: '40px' }">
        <el-row :gutter="40">
          <el-col :span="5">
            <!-- 筛选表单 -->
            <!-- 搜索输入框 -->
            <el-input
              v-model="queryData.keyword"
              prefix-icon="el-icon-search"
              size="small"
              placeholder="请输入员工姓名全员搜索"
              clearable
              @input="searchChange"
            />
            <!-- 组织架构树 -->
            <el-tree
              ref="tree"
              node-key="id"
              :data="treeList"
              default-expand-all
              highlight-current
              :props="{ label: 'name' }"
              @current-change="selectChange"
            />
          </el-col>
          <el-col class="left" :span="19">
            <!-- 操作按钮 -->
            <el-row type="flex" justify="end">
              <el-button size="mini" type="primary">添加员工</el-button>
              <el-button size="mini">excel导入</el-button>
              <el-button size="mini">excel导出</el-button>
            </el-row>
            <br>
            <!-- 表格 -->
            <el-table :data="list">
              <el-table-column prop="staffPhoto" label="头像">
                <template slot-scope="{ row }">
                  <el-avatar
                    v-if="row.staffPhoto"
                    size="small"
                    :src="row.staffPhoto"
                    alt=""
                  />
                  <span v-else class="username">{{
                    row.username?.charAt(0)
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="username" label="姓名" />
              <el-table-column prop="mobile" sortable label="手机号" />
              <el-table-column prop="mobile" sortable label="工号" />
              <el-table-column prop="formofEmployment" label="聘用形式">
                <template slot-scope="{ row }">
                  {{ row.formofEmployment * 1 === 1 ? "正式" : "非正式" }}
                </template>
              </el-table-column>
              <el-table-column prop="departmentName" label="部门" />
              <el-table-column prop="timeOfEntry" sortable label="入职时间" />
              <el-table-column label="操作">
                <template slot-scope="{ row }">
                  <el-button size="mini" type="text">查看</el-button>
                  <el-button size="mini" type="text">角色</el-button>
                  <el-popconfirm
                    title="这是一段内容确定删除吗?"
                    @confirm="delRow(row.id)"
                  >
                    <el-button
                      slot="reference"
                      size="mini"
                      type="text"
                    >删除</el-button>
                  </el-popconfirm>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页区域 -->
            <el-pagination
              :current-page.sync="queryData.page"
              layout="total,prev, pager, next"
              :page-size="queryData.pagesize"
              :total="total"
              @current-change="currentChange"
            />
          </el-col>
        </el-row>
      </el-card>
    </div>
  </div>
</template>
<script>
import { getEmployeeListApi } from '@/api/employee'
import { delDepartmentInfoApi, getDepartmentListApi } from '@/api/department'
import { transListToTreeDate } from '@/utils'

export default {
  name: 'Employee',
  data() {
    return {
      list: [],
      queryData: {
        page: 1,
        pagesize: 10,
        keyword: '',
        departmentId: null
      },
      total: 0,
      // 组织架构的数据
      treeList: []
    }
  },
  created() {
    this.getTreeData()
  },
  methods: {
    async getTreeData() {
      // 1.请求数据
      const res = await getDepartmentListApi()
      const result = transListToTreeDate(res, 0)
      this.treeList = result
      this.queryData.departmentId = result[0].id
      this.$nextTick(() => {
        this.$refs.tree.setCurrentKey(result[0].id)
      })
      this.initData()
    },
    async initData() {
      const { rows, total } = await getEmployeeListApi(this.queryData)
      this.list = rows
      this.total = total
    },
    currentChange(val) {
      this.queryData.page = val
      this.initData()
    },
    // 树的高亮切换事件
    selectChange(val) {
      this.queryData.departmentId = val.id
      this.queryData.page = 1
      this.initData()
    },
    // 搜索提交
    searchChange() {
      if (this.timer) clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.queryData.page = 1
        this.initData()
      }, 400)
    },
    // 删除
    async delRow(id) {
      try {
        await delDepartmentInfoApi(id)
        this.$message.success('删除成功')
        if (this.queryData.page > 1 && this.list.length === 1) {
          this.queryData.page--
        }
        this.initData()
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
// .app-container {
//   background: #fff;
//   display: flex;
//   .left {
//     width: 280px;
//     padding: 20px;
//     border-right: 1px solid #eaeef4;
//   }
//   .right {
//     flex: 1;
//     padding: 20px;
//     .opeate-tools {
//       margin: 10px;
//     }
.username {
  height: 30px;
  width: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
  color: #fff;
  background: #04c9be;
  font-size: 12px;
  display: inline-block;
}
//   }
// }
</style>
